<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
  }
  .examine >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .examine >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
  .weui-cell_select {
    padding: 0 15px;
  }

  .weui-panel {
    background: #eee;
  }

  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }

  .weui-panel {
    margin-top: 0;
    text-align: left;
  }

  .hd .weui-grid.js_grid {
    font-weight: 600;
  }

  .weui-grid.js_grid {
    width: 20%;
    padding: 10px 1px;
  }

  /*.weui-grid.fir {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.sec {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.thr {*/
  /*  width: 20%;*/
  /*}*/
  /*.weui-grid.fou {*/
  /*  width: 15%;*/
  /*}*/
  /*.weui-grid.fiv {*/
  /*  width: 15%;*/
  /*}*/
  .weui-grid__label {
    text-overflow: initial;
  }
  .section {
    margin: 5px;
    border-radius: 5px;
  }
</style>
<template>
  <div class="examine" style="background: #eee;">
    <div class="rj-wrap" style="background: #fff;">
      {{title}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <!--    主表信息-->
    <div class="weui-form-preview section" style="background: #fff;">
      <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">编号</label>
        <em class="weui-form-preview__value">{{Farepay.code}}</em>
      </div>
      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">主体</label>
          <span class="weui-form-preview__value">{{Farepay.orgname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">部门</label>
          <span class="weui-form-preview__value">{{Farepay.departname}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">物流公司</label>
          <span class="weui-form-preview__value">{{Farepay.supplierName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">物流单费用</label>
          <span class="weui-form-preview__value">{{attachUnit(Farepay.amount, ' 元')}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">其他费用</label>
          <span class="weui-form-preview__value">{{attachUnit(Farepay.otheramount, ' 元')}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">费用总额</label>
          <span class="weui-form-preview__value">{{attachUnit(Farepay.totalamount, ' 元')}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">状态</label>
          <span class="weui-form-preview__value">{{Farepay.statusName}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">备注</label>
          <span class="weui-form-preview__value">{{Farepay.remark}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">操作人</label>
          <span class="weui-form-preview__value">{{Farepay.operator}}</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">创建时间</label>
          <span class="weui-form-preview__value">{{Farepay.createtime}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="Farepay.files && Farepay.files.length > 0">
        <label class="weui-form-preview__label">附件</label>
          <a v-for="(item, index) in Farepay.files" :href="item.url">
            <span class="weui-form-preview__value">{{item.imagename}}</span>
          </a>
        </div>
      </div>
    </div>
    <!--    明细信息-->
    <div class="weui-panel__hd" style="text-align: left;">物流订单明细</div>
    <div class="weui-panel__bd" style="background: #fff;">
      <div class="weui-grids">
        <div class="row hd">
          <a href="#" class="weui-grid js_grid fir">
            <p class="weui-grid__label">
              车牌号
            </p>
          </a>
          <a href="#" class="weui-grid js_grid sec">
            <p class="weui-grid__label">
              运费
            </p>
          </a>
          <a href="#" class="weui-grid js_grid thr">
            <p class="weui-grid__label">
              其他费用
            </p>
          </a>
          <a href="#" class="weui-grid js_grid fou">
            <p class="weui-grid__label">
              总金额
            </p>
          </a>
          <a href="#" class="weui-grid js_grid fiv">
            <p class="weui-grid__label">
              订单号
            </p>
          </a>
        </div>
        <template v-for="item in Farepay.items">
          <div class="row">
            <a href="#" class="weui-grid js_grid fir">
              <p class="weui-grid__label">
                {{item.carcode}}
              </p>
            </a>
            <a href="#" class="weui-grid js_grid sec">
              <p class="weui-grid__label">
                {{item.wlamount ? item.wlamount : 0}}
              </p>
            </a>
            <a href="#" class="weui-grid js_grid thr">
              <p class="weui-grid__label">
                {{item.othercost ? item.othercost : 0}}
              </p>
            </a>
            <a href="#" class="weui-grid js_grid fou">
              <p class="weui-grid__label">
                {{item.totalamount ? item.totalamount : 0}}
              </p>
            </a>
            <a href="#" class="weui-grid js_grid fiv">
              <p class="weui-grid__label">
                {{item.linkecodes}}
              </p>
            </a>
          </div>
        </template>
      </div>


    </div>
    <!--    动态数据-->
    <p style="height: 5px;"></p>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">开户行</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" disabled type="text" :value="Farepay.bank" >
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">银行账号</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" disabled type="text" :value="Farepay.bankCode" >
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">支付金额</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" disabled type="text" :value="attachUnit(Farepay.totalamount, ' 元')" >
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <textarea class="weui-textarea opinion" id="opinion" name="opinion" placeholder="请输入意见内容" rows="2"></textarea>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <div class="weui_uploader">
              <div class="weui_uploader_hd weui_cell" style="padding-left: 0;">
                <div class="weui_cell_bd weui_cell_primary" id="examine">单据上传</div>
                <div class="weui_cell_ft"></div>
              </div>
              <div class="weui_uploader_bd">
                <ul class="weui-uploader_files" id="images">
                  <li class="weui-uploader_file" v-for="(img, index) in images.serverId" :id="img"  @click=del(img) ><img :src="images.srcStr[index]" width="85" /></li>
                </ul>
                <div class="weui_uploader_input_wrp">
                  <input type="button" id="selectImage"  class="weui_uploader_input" >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--        <div ref="actHtml" class="fixcont">-->
<!--          <div class="weui-btn-area">-->
<!--            <a class="weui-btn weui-btn_primary halfbtn subbtn" href="javascript:" @click="postForm">同意</a>-->
<!--            <a class="weui-btn weui-btn_primary halfbtn subbtn" v-if="refuseflag == 1" href="javascript:" @click="rejectIt">拒绝</a>-->
<!--            <a class="weui-btn weui-btn_primary halfbtn" v-else href="javascript:" @click="$router.back(-1)" id="sub">返回</a>-->
<!--          </div>-->
<!--        </div>-->
      </form>
    </div>
    <div id="bmlogs">
      <SalesOperationLogs2 :nodeid="nodeid" :orderid="id" :srguid="Farepay.srguid" :departid="Farepay.departid"></SalesOperationLogs2>
    </div>
    <div class="weui-tabbar">
      <a href="javascript:;" class="weui-tabbar__item weui-bar__item--on" @click="postForm">
        <div class="weui-tabbar__icon">
          <img src="@/assets/icon-pass.png" alt="">
        </div>
        <p class="weui-tabbar__label">通过</p>
      </a>
      <a href="javascript:;" class="weui-tabbar__item" @click="rejectIt">
        <div class="weui-tabbar__icon">
          <img src="@/assets/icon-nopass.png" alt="">
        </div>
        <p class="weui-tabbar__label">拒绝</p>
      </a>
    </div>

  </div>
</template>

<script>
  import wx from 'weixin-js-sdk';
  import SalesOperationLogs2 from '@/components/common/SalesOperationLogs2'

  export default {
  name: 'Examine14',
  data () {
    return {
      openid: localStorage.openid,
      id: '',
      title: '',
      nodeid: '',
      annex: '',
      Farepay: {},
      baseItems: '',
      wxParams: {},
      images: {
        serverId: [],
        srcStr: [],
      },
      refuseflag: '',
      refuseNodes: [],
      orderfiles: [],
      amount: ''
    }
  },
    components: {
      SalesOperationLogs2
    },
  mounted () {
    //提交操作定位到页面底部
    //$('#bmlogs').css('margin-bottom', this.$refs.actHtml.offsetHeight)

    //$('#opinion').focus();
    this.id = this.$route.query.guid;
    this.nodeid = this.$route.query.nodeid;
    this.annex = this.$route.query.annex;
    this.title = this.$route.query.title;
    this.refuseflag = this.$route.query.refuseflag;
    if (this.refuseflag == 1) {
      this.getRefuseNodes();
    }

    this.getFarepay(this.id, this);
    if (this.$route.query.status) {
      this.status = this.$route.query.status;
    }
    this.getFiles();
  },
  methods: {
    wxConfig: function(wxParams) {
      wx.config({
        debug: false,            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: wxParams.appid,    // 必填，公众号的唯一标识
        timestamp: wxParams.timestamp,  // 必填，生成签名的时间戳
        nonceStr: wxParams.nonceStr, // 必填，生成签名的随机串
        signature: wxParams.signature,// 必填，签名
        jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
      });
    },
    wxUoloadImage: function(that) {
      let cthis = this;
      //wx.ready(function(){
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      document.querySelector('#selectImage').onclick = function () {
        wx.chooseImage({
          success: function (res) {
            $(function(){
              $.each( res.localIds, function(i, n){
                wx.uploadImage({
                  localId: n,
                  isShowProgressTips: 1,
                  success: function (res) {
                    if (that.checkCore() == 'ios') {
                      wx.getLocalImgData({
                        localId: n, // 图片的localID
                        success: function (res2) {
                          cthis.$nextTick(function () {
                            cthis.images.srcStr.push(res2.localData);
                          })
                        }
                      });
                    } else {
                      cthis.$nextTick(function () {
                        cthis.images.srcStr.push(n);
                      })
                    }

                    cthis.images.serverId.push(res.serverId);
                  },
                  fail: function (res) {
                    $.alert(JSON.stringify(res));
                  }
                });
              });
            });
          }
        });
      };
      //});

    },
    del: function (id){
      let cthis = this;
      $.actions({
        actions: [{
          text: "删除",
          onClick: function() {
            $.confirm("确定删除?", function() {
              //点击确认后的回调函数
              //删掉id
              var ids = cthis.images.serverId;
              var a =  ids.indexOf(id);
              cthis.$nextTick(function () {
                cthis.images.serverId.splice(a,1);
                cthis.images.srcStr.splice(a,1);
              })
              //$("#"+id).hide();
            }, function() {
              //点击取消后的回调函数
            });
          }
        }
        ]
      });
    },
    checkCore:function() {
      var u = navigator.userAgent;
      //var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;//g
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);   //ios终端
      if (isIOS) {
        return 'ios';
      } else  {
        return 'android';
      }
    },
    getFarepay: function(id, that) {
      this.axios({
        method: 'post',
        url: '/wlinfo/FarepayApply!getUpImagInfo.action',
        params: {applyId: id, url: location.href.split("#")[0]}
      }).then(response => {
        if (response.data.msg == 'success') {
          this.Farepay = response.data.apply || {};
          let wxParams = response.data.params;
          //配置微信公众号参数
          this.wxConfig(response.data.params);
          //上传
          this.wxUoloadImage(that);
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
      });
    },
    getFiles: function() {
      let that = this;
      this.axios({
        method: 'get',
        url: '/sales/Fileinfo!getFileinfo.action',
        params: {orderid: this.id}
      }).then(response => {

        if (response.data.msg == 'success') {
          this.orderfiles = response.data.files;
        } else {
          //失败时不提示
        }
      });
    },
    getRefuseNodes: async function() {
      let that = this;
      await this.axios({
        method: 'get',
        url: '/sales/Flowtempnode!getRefuseNodes.action',
        params: {orderid: this.id, nodeid: this.nodeid}
      }).then(response => {

        if (response.data.msg == 'success') {
          this.refuseNodes = response.data.optNodes.map(function (item) {
            return {text: item.name,
              onClick: function() {
                $.confirm("确定要将订单回退到 " + item.name + " 节点？", function() {
                  that.doReject(item.guid, item.name, item.operatorid);
                })
              }};
          });
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastText('获取可回退节点数据失败!');
        }
      });
    },
    rejectIt: function () {
      if (!this.checkEmy('opinion')) {
        this.toastText('意见不能为空！');
        return false;
      }
      console.log('this.refuseNodes:', this.refuseNodes)
      if (this.refuseNodes.length > 0) {
        $.actions({
          title: '选择回退节点',
          actions: this.refuseNodes
        });
      } else {
        this.toastText('无可回退节点！');
        return false;
      }
    },
    doReject: function (refuseNodeid, refuseNodename, refuseOperatorid) {
      let that = this;

      //防止重复提交
      $('.subbtn').attr("disabled",true).css("pointer-events","none");
      //显示提交状态
      $.showLoading("正在提交");

      let postData = {};
      postData.imgids = this.images.serverId.join(',');
      // postData.imgids = '';
      postData.applyid = this.id;
      postData.opinion = ($('#opinion').val() || '') + ' 退回到' + refuseNodename;
      postData.nodeid = this.nodeid;
      postData.refuseNodeid = refuseNodeid;
      postData.backUserid = refuseOperatorid;
      this.axios({
        method: 'post',
        url: '/wlinfo/FarepayApply!refuse.action',
        params: postData
      }).then((response) => {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
        //关闭提交状态
        $.hideLoading();

        if (response.data.msg == 'success') {
          this.toastSuccess('提交成功!');
          this.$router.push({name: 'FarepayList'});
        } else if (response.data.msg == 'canotopt') {
          this.toastText('不允许的操作！');
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
      }).catch(function (error) {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
        //关闭提交状态
        $.hideLoading();
        that.toastError('系统错误');
      });
    },
    postForm: function () {
      let that = this;
      // if (!this.amount) {
      //   this.toastText('请输入支付金额！');
      //   return false;
      // }
      // if (this.amount > this.Farepay.totalamount) {
      //   this.toastText('支付金额不能大于费用总额！');
      //   return false;
      // }
      if (this.annex.indexOf('approval') > -1 && this.images.serverId.length == 0) {
        this.toastText('单据不能为空！');
        return false;
      }
      //防止重复提交
      $('.subbtn').attr("disabled",true).css("pointer-events","none");
      //显示提交状态
      $.showLoading("正在提交");

      let postData = {};
      postData.imgids = this.images.serverId.join(',');
      postData.applyid = this.id;
      postData.opinion = $('#opinion').val() != '' ? $('#opinion').val() : '同意';
      postData.nodeid = this.nodeid;
      postData.amount = this.Farepay.totalamount;
      //postData.status = this.status;
      this.axios({
        method: 'post',
        url: '/wlinfo/FarepayApply!pay.action',
        params: postData
      }).then(response => {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
        //关闭提交状态
        $.hideLoading();

        if (response.data.msg == 'success') {
          this.toastSuccess('提交成功!');
          this.$router.push({name: 'FareApplyList'});
        } else if (response.data.msg == 'canotopt') {
          this.toastText('不允许的操作！');
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
      }).catch(function (error) {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
        //关闭提交状态
        $.hideLoading();
        that.toastError('系统错误');
      });
    },
  }
}
</script>
